import React, { Component, PropTypes } from 'react';
import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  DeviceEventEmitter,
  Platform,
  Image,
  Animated,
  TouchableOpacity,
  Dimensions,
  NativeAppEventEmitter
} from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';

import ProgressBar from '../global/ProgressBar';
import DefaultTabBar from '../global/scrollableTabView/DefaultTabBar';
import Button from '../global/scrollableTabView/Button';

import OwnerList from './ownerList';
import styles from './ownerInfoStyle';

const windowHeight = Dimensions.get('window').height;

class OwnerInfo extends Component {
    constructor(props) {
		super(props);

        this.heightTop = (windowHeight / 2) *(-1);

		this.state = {
			isLoading: true,
			isRefreshing: false,
			tab: 0,
            isShow: false,
            display: 'none',
            opacityValue: new Animated.Value(0.0),
            contentH: 0,
            contentY: new Animated.Value( this.heightTop ),
		};

		// this._getTabHeight = this._getTabHeight.bind(this);
		this._onChangeTab = this._onChangeTab.bind(this);

		// this.props.navigator.setOnNavigatorEvent(this._onNavigatorEvent.bind(this));
	}
    componentWillMount() {
		// this._retrieveDetails();
	}

    componentDidMount(){

    }

    _onChangeTab({ i, ref }) {
		this.setState({ tab: i });
	}

    // _onNavigatorEvent(event){
    //     if (event.type === 'ScreenChangedEvent') {
	// 		if (event.id === 'didAppear') {//出现时
    //
	// 		}
	// 	}
    // }

    componentWillUnmount(){
        // this._subcribOrder && this._subcribOrder.remove();
    }

    _showFliter(){
        if (this.isShow) return;
        this.setState({display: 'flex'});

        Animated.parallel([
            Animated.timing(
                this.state.opacityValue,
                {
                    toValue: 1.0,
                    duration: 500,
                }
            ),
            Animated.timing(this.state.contentY, {
                toValue: 0,
                duration: 500,
            }),
        ]).start(()=>{
            this.isShow = true;
        });
    }

    _hideFliter(){

        if (!this.isShow) return;

        Animated.parallel([
            Animated.timing(
                this.state.opacityValue,
                {
                    toValue: 0.0,
                    duration: 500,
                }
            ),
            Animated.timing(this.state.contentY, {
                toValue: this.heightTop,
                duration: 500,
            }),
        ]).start(()=>{
            this.setState({display: 'none'});
            this.isShow = false;
        });
    }

    _fliterBtn(page){
        let changPage = this.isShow?0:page;
        this.scrollTab.setState({scrollValue: new Animated.Value(changPage)});
        this.scrollTab.updateSceneKeys({
          page: changPage,
          callback: this._onChangeTab.bind(this, {i:changPage,}),
        });

        if(page == 0){
            this._hideFliter();
        }else{
            this.isShow?this._hideFliter():this._showFliter();
        }
    }

    _pressItem(){

    }

    _renderTab(name, page, isTabActive, onPressHandler) {
      const {textStyle, } = styles;
      const textColor = isTabActive ? '#EA5404' : '#555555';
      const fontWeight = isTabActive ? 'bold' : 'normal';
      const img = isTabActive ? require("../../../img/hk_arrowup_icon.png"):require("../../../img/hk_arrowdown_icon.png");
      const markDom = (page==1?<Image source={img} style={{marginTop: 10}} />:null);

      return <Button
        style={{flex: 1, }}
        key={name}
        accessible={true}
        accessibilityLabel={name}
        accessibilityTraits='button'
        onPress={() => {this._fliterBtn(page)}}
      >
        <View style={[{flex: 1, flexDirection: 'row', alignItems: 'center',justifyContent: 'center',paddingBottom: 10}, this.props.tabStyle, ]}>
          <Text style={[textStyle, {color: textColor, fontWeight, marginRight:5}, ]}>
            {name}
          </Text>
          {markDom}
        </View>
      </Button>;
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollableTabView
                    onChangeTab={this._onChangeTab}
                    locked={true}
                    scrollWithoutAnimation={true}
                    ref={component => this.scrollTab = component}
                    renderTabBar={() => (
                        <DefaultTabBar
                            activeTextColor={"#EA5404"}
                            inactiveTextColor={"#555555"}
                            renderTab={this._renderTab.bind(this)}
                            textStyle={styles.textStyle}
                            underlineStyle={styles.underlineStyle}
                            style={styles.tabBar}
                        />
                    )}>
                    <OwnerList
                        tabLabel="全部"
                        tab={0}
                        parent={this}
                        navigator={this.props.navigator}/>
                    <View tabLabel="筛选"></View>
                </ScrollableTabView>
                <Animated.View
                    pointerEvents={'auto'}
                    style={[styles.overlay,{backgroundColor:'rgba(0, 0, 0, 0.4)',overflow: 'hidden', opacity: this.state.opacityValue, display: this.state.display}]}
                  >
                    <TouchableOpacity onPress={()=>{this.isShow && this._fliterBtn(1)}} style={styles.overlay} />
                    <Animated.View style={[styles.houseContainer, {transform:[{translateY: this.state.contentY},]},]}>
                        <TouchableOpacity
                            activeOpacity={0.7}
                            onPress={this._pressItem.bind(this)}>
                            <Text style={styles.houseItem}>1号楼</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={0.7}
                            onPress={this._pressItem.bind(this)}>
                            <Text style={styles.houseItem}>2号楼</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={0.7}
                            onPress={this._pressItem.bind(this)}>
                            <Text style={[styles.houseItem,{marginRight:0}]}>3号楼</Text>
                        </TouchableOpacity>
                    </Animated.View>
                </Animated.View>
            </View>
        );
    }
}

var connectHelper = require('../../services/connectHelper');
OwnerInfo = connectHelper(state => state)(OwnerInfo);

module.exports = OwnerInfo;
